<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8" />
		<title>水果商城</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/proList.css" />
		<link rel="stylesheet" type="text/css" href="css/mygrxx.css" />
		<script type="text/javascript" src="js/axios.min.js"></script>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//登陆成功替换登录
			function a() {
					var span1='';
					var uname=window.localStorage.getItem('uname');
					var status=window.localStorage.getItem('status');
					if(status==0){
						span1=`<span class="fl">`+`欢迎您&nbsp:&nbsp&nbsp&nbsp&nbsp`+uname+`</span>`
						$("#mygxin").html(" ");
						$("#mygxin").append(span1);
						$("#login").hide();
						$("#reg").hide();
					}
				}
				$(function(){
				a();
			})
			//模糊查找水果，显示在界面里
			function fuzzyQueryFruit() {
				var fname=document.getElementById("fname").value;
				console.log(fname);
				$.ajax({
					url: "http://localhost:8088/fruit/fuzzyQueryFruit/"+fname,
					type: "GET",
					dataType: "JSON",
					success: function(data){
						$("#salefruit").html('');
						var d = '';
						for (fruits of data) {
							var i=1;
							d +=
							`
							<a href="#">
								<div id="fid" style="display:none">${fruits.fid}</div>
							<dl>
								<dt>
									<img src="${fruits.furl}" style="width: 268px;height: 268px;"/>
									<span class="abr"></span>
								</dt>
								<dd>【${fruits.fname}】${fruits.fdetail}</dd>
								<dd><span>￥${fruits.fprice}</span></dd>
							</dl>
						</a>
							`;
					}
					$("#salefruit").append(d);
					$("#salefruit a").on('mouseenter', function () {
						var html = "";
						html = '<p class="quick" onclick="b(\'' + $(this).find("#fid").html() + '\')">快速浏览</p>';
						$(this).append(html);
						$(".quick").on('click', function () {
							$(".mask").show();
							$(".proDets").show();
						});
						$(".btns .cart").click(function () {
							if ($(".categ p").hasClass("on")) {
								$(".proDets").hide();
								$(".mask").hide();
							}
						});
					});
					$("#salefruit a").on('mouseleave', function () {
						$(this).find("p").remove();
					});
				},
				error: function () {
					alert("获取失败");
				}
				})
			}
			//按销量查询水果List
			function SaleFruit() {
			// var ftype=$("#MelonFruit").html();
			$.ajax({
				url: "http://localhost:8088/fruit/getFruitBySale",
				type: 'GET',
				dataType: 'json',
				success: function (data) {
					// alert("成功");
					var d = '';
					for (fruits of data) {
						var i=1;
						d +=
						`
						<a href="javascript:void(0)">
							<div id="fid" style="display:none">${fruits.fid}</div>
						<dl>
							<dt>
								<img src="${fruits.furl}" style="width: 268px;height: 268px;"/>
							</dt>
							<dd>【${fruits.fname}】${fruits.fdetail}</dd>
							<dd><span>￥${fruits.fprice}</span></dd>
						</dl>
					</a>
						`;
					}
					$("#salefruit").append(d);
					$("#salefruit a").on('mouseenter', function () {
						var html = "";
						html = '<p class="quick" onclick="b(\'' + $(this).find("#fid").html() + '\')">快速浏览</p>';
						$(this).append(html);
						$(".quick").on('click', function () {
							$(".mask").show();
							$(".proDets").show();
						});
						$(".btns .cart").click(function () {
							if ($(".categ p").hasClass("on")) {
								$(".proDets").hide();
								$(".mask").hide();
							}
						});
					});
					$("#salefruit a").on('mouseleave', function () {
						$(this).find("p").remove();
						// $(this).css('border', '1px solid #fff');
					});
				},
				error: function () {
					alert("获取失败");
				}
			});
		};
		//根据水果id查询水果详情
		function b(fid) {
			$.ajax({
				url: "http://localhost:8088/fruit/getFruitById/" + fid,
				type: "GET",
				dataType: 'json',
				// jsonp: 'callback',
				// jsonpCallback: "success",//这里指定回调函数为success
				success: function (data) {
					var div1 = `<h4 class="fl">【` + data.data.fname + `】 ` + data.data.fdetail + `</h4>
								<span class="fr">`+'￥'+ data.data.fprice + `</span>`;
					$("#tit1").html(' ');
					$("#tit1").append(div1);
					var span1 = data.data.fstock;
					window.localStorage.setItem('span1',span1);
					$("#span1").html(' ');
					$("#span1").append(span1);
					var img1 = `<img style="width: 360px;height: 360px;" class="list" src="` + data.data.furl + `" />`
					$("#Img1").html(' ');
					$("#Img1").append(img1);
					var size1 = `<img style="width:50px;height: 30px;" class="list" src="` + data.data.furl + `" alt="【礼盒装】1KG" data-src="` + data.data.furl + `" />`
					$("#size1").html(' ');
					$("#size1").append(size1);
					var size2 = `<img style="width:50px;height: 30px;" class="list" src="` + data.data.furl + `" alt="【礼盒装】2KG" data-src="` + data.data.furl + `" />`
					$("#size2").html(' ');
					$("#size2").append(size2);
					var size3 = `<img style="width:50px;height: 30px;" class="list" src="` + data.data.furl + `" alt="【礼盒装】3KG" data-src="` + data.data.furl + `" />`
					$("#size3").html(' ');
					$("#size3").append(size3);
					var size4 = `<img style="width:50px;height: 30px;" class="list" src="` + data.data.furl + `" alt="【尝鲜】500g" data-src="` + data.data.furl + `" />`
					$("#size4").html(' ');
					$("#size4").append(size4);
					$(".proIntro .smallImg p img").hover(function(){
	   						$(this).parents(".smallImg").find("span").remove();
	   						var lf = $(this).position().left;
	   						var con = $(this).attr("alt");
	   						$(this).parent("p").addClass('on');
	   						$(this).parents(".smallImg").append('<span>'+con+'</span>');
	   						$(".smallImg").find("span").css("left",lf);
	   					},function(){
	   						$(this).parents(".smallImg").find("span").remove();
	   						$(this).parent("p").removeClass('on');
	   					});
	   					$(".proIntro .smallImg img").click(function(){
	   						var offset = $(this).attr("data-src");
	   						//小弹框和详情页图片大小不一样
	   						$(this).parents(".proCon").find('.proImg').children(".det").attr("src",offset).css({'width':'580px','height':'580px'});
	   						$(this).parents(".proCon").find('.proImg').children(".list").attr("src",offset).css({'width':'360px','height':'360px'});
	   						$(this).parents(".smallImg").find("span").remove();
	   						$(this).parent("p").addClass('on').siblings().removeClass('on');
	   						//移除鼠标离开事件
	   						$(this).off("mouseleave").parent('p').siblings().find('img').on('mouseleave',function(){
	   							$(this).parents(".smallImg").find("span").remove();
	   							$(this).parent("p").removeClass('on');
	   						})
	   					});

					$("#buyCar").click(function(){
						var uid = window.localStorage.getItem('uid');
						if(uid == null){
							alert("请先登录！")
							window.location.href = "login.html";
							return;
						}
						var number = document.getElementById("snumber").innerHTML;
						axios.get("http://localhost:8088/shopcar/ifexist/"+window.localStorage.getItem("uid")+"/"+fid,{

						}).then(res=>{
							console.log("查找是否存在"+res.data)
							if(res.data==1){
								alert("购物车已存在该商品。请前往购物车直接添加数量")
								window.location.href="cart.html";
							}else if(res.data==0){
								axios.get("http://localhost:8088/shopcar/save",{
								params:{
									fid:fid,
									uid: window.localStorage.getItem("uid"),
									furl: data.data.furl,
									fname:data.data.fname,
									sprice:data.data.fprice,
									snumber:number,
									price:data.data.fprice * number,
								}
							})
								.then(res => {
									alert("加入"+data.data.fname+"*"+number+"成功")
									window.location.href="cart.html";			
								})
							}
						})
						
				})
				$("#buyOrder").click(function(){
					var uid = window.localStorage.getItem('uid');
					if(uid == null){
						alert("请先登录！")
						window.location.href = "login.html";
						return;
					}
					$("#proDets").hide();
					$(".bj").show();
					var zjia = data.data.fprice * document.getElementById("snumber").innerHTML;
					axios.get( 'http://localhost:8088/coupan/getUsersCoupanList1/'+window.localStorage.getItem("uid"),{

					}).then(res=>{
						console.log(res.data[0]);
						document.getElementById("onumber").value=document.getElementById("snumber").innerHTML;
						document.getElementById("onote").value = data.data.fname;
						document.getElementById("danjia").value = data.data.fprice;
						document.getElementById("zongjia").value = (data.data.fprice * document.getElementById("snumber").innerHTML).toFixed(2);
					
						for (coupan of res.data) {
							$("#coupan").append("<option value="+coupan.cmoney+">"+coupan.cname+"</option>")
						}
						// 添加订单
						// console.log($('#coupan option:selected').val());
						$('#coupan').change(function () {
							axios.get('http://localhost:8088/users/isMember/'+window.localStorage.getItem("uid")).then(res=>{
            					var sf = document.getElementById("zongjia").value-$(this).val();
								if(res.data==1){//判断会员
									console.log(document.getElementById("zongjia").value*0.8-$(this).val());
									sf=document.getElementById("zongjia").value*0.8-$(this).val();
								
								}
								if(sf<0){
									sf=0;
								}
								document.getElementById("sf").innerHTML = sf.toFixed(2);
          						})
   						 });
					})
				})
				$("#tobuy").click(function(){
					axios({
					url: 'http://localhost:8088/order/addOrder',
					method: 'post',
					data: {
						omessage: document.getElementById("omessage").value,
						oprice: (document.getElementById("danjia").value * document.getElementById("onumber").value).toFixed(2),
						onote: document.getElementById("onote").value,
						ocoupan:document.getElementById("coupan").value,
						orprice: document.getElementById("sf").innerHTML,
						zongjia:document.getElementById("zongjia").value,
						uid:window.localStorage.getItem("uid")
					}, 
					}).then(res => {
					console.log(res);
					window.location.href="mygxin.html";
					})
				})
				},
				error: function () {
					alert("获取失败");
				}
			});
		};
		
		$(function () {
			SaleFruit();
			$('#home_slider').flexslider({
					animation: 'slide',
					controlNav: true,
					directionNav: true,
					animationLoop: true,
					slideshow: true,
					slideshowSpeed:2000,
					useCSS: false
				});
		});
		//隐藏mask框
		function hidden1(){
			$("#mask").hide();
			$(".bj").hide();
			location.reload();
		}
				</script>
	</head>
	<body>
		<!------------------------------head------------------------------>
		<div class="head">
			<div class="wrapper clearfix">
				<div class="clearfix" id="top">
					<h1 class="fl"><a href="index.html"><img src="img/logo.png" style="width: 387px;
						height: 132px;
						position: absolute;
						margin-top: -34px;
						margin-left: -100px;
					"/></a></h1>
					<div class="fr clearfix" id="top1">
						<p class="fl">
							<a href="mygxin.html" id="mygxin"></a>
							<a href="login.html" id="login">登录</a>
							<a href="reg.html" id="reg">注册</a>
						</p>
						<form action="javascript:void(0)" method="get" class="fl">
							<input type="text" placeholder="热门搜索：荔枝" id="fname"/>
							<input type="submit" value="" onclick="fuzzyQueryFruit()"/>
						</form>
						
					</div>
				</div>
				<ul class="clearfix" id="bott">
					<li><a href="index.html">首页</a></li>
					<li>
						<a href="javascript:void(0)">水果分类</a>
						<div class="sList">
							<div class="wrapper  clearfix">
								<a href="bzproList.html">
									<dl>
										<dd>瓜果类</dd>
									</dl>
								</a>
								<a href="paint2.html">
									<dl>
										<dd>浆果类</dd>
									</dl>
								</a>
								<a href="bzproList.html">
									<dl>
										<dd>柑橘类</dd>
									</dl>
								</a>
								<a href="paint.html">
									<dl>
										<dd>核果类</dd>
									</dl>
								</a>
								<a href="paint.html">
									<dl>
										<dd>坚果类</dd>
									</dl>
								</a>
								
								
							</div>
						</div>
					</li>
					<li>
						<a href="javascript:void(0)">热销推荐</a>
						<div class="sList2">
							<div class="clearfix">
								<a href="javascript:void(0)">西瓜</a>
								<a href="javascript:void(0)">荔枝</a>
								<a href="javascript:void(0)">蓝莓</a>
								<a href="javascript:void(0)">香蕉</a>
								<a href="javascript:void(0)">杨梅</a>
								<a href="javascript:void(0)">葡萄</a>
								<a href="javascript:void(0)">哈密瓜</a>
								<a href="javascript:void(0)">芒果</a>
								<a href="javascript:void(0)">枇杷</a>
								<a href="javascript:void(0)">樱桃</a>
								<a href="javascript:void(0)">车厘子</a>
							</div>
						</div>
					</li>
					<li>
						<a href="bzproList.html">时令水果</a>
						<div class="sList2">
							<div class="clearfix">
								<a href="bzproList.html">火龙果</a>
								<a href="bzproList.html">西瓜</a>
								<a href="bzproList.html">荔枝</a>
								<a href="bzproList.html">李子</a>
								<a href="bzproList.html">杨梅</a>
								<a href="bzproList.html">百香果</a>
								<a href="bzproList.html">车厘子</a>
								<a href="bzproList.html">樱桃</a>
								<a href="bzproList.html">枇杷</a>
							</div>
						</div>
					</li>
					<li><a href="javascript:void(0)">限时特卖</a></li>
					<li><a href="javascript:void(0)">国产优选</a></li>
					<li><a href="javascript:void(0)">联系我们</a></li>
				</ul>
			</div>
		</div>
		<!-------------------------banner--------------------------->
		<div class="block_home_slider">
			<div id="home_slider" class="flexslider">
				<ul class="slides">
					<li>
						<div class="slide">
							<img src="img/8.jpg" style="width: 100%;height: 560px;"/>
						</div>
					</li>
					<li>
						<div class="slide">
							<img src="img/7.jpg" style="width: 100%;height: 560px;"/>
						</div>
					</li>
				</ul>
			</div>
		</div>
		
		<!------------------------------thImg------------------------------>
		<div class="thImg">
			<div class="clearfix">
				<a href="javascript:void(0)"><img src="img/i1.jpg" style="width: 260px;height: 251px;"/></a>
				<a href="javascript:void(0)"><img src="img/i2.jpg" style="width: 260px;height: 251px;"/></a>
				<a href="javascript:void(0)"><img src="img/i3.jpg" style="width: 260px;height:251px;"/></a>
			</div>
		</div>
		<!------------------------------people------------------------------>
		<div class="people">
			<div class="wrapper">
				<h2><img src="img/ih1.jpg"/></h2>
				<div class="pList clearfix tran proList" id ="salefruit">
					
				</div>
			</div>
		</div>
		<!----------------mask------------------->
		<div class="mask"></div>
		<!-------------------mask内容------------------->
		<div class="proDets" id="proDets">
			<img class="off" src="img/temp/off.jpg" />
			<div class="tit clearfix" id="tit1"></div>
			<div class="proCon clearfix">
				<div class="proImg fl">
					<div id="Img1"></div>
					<div class="smallImg clearfix">
					</div>
				</div>
				<div class="fr">
					<div class="proIntro">
						<p>水果规格</p>
						<div class="smallImg clearfix categ">
							<p class="fl" id="size1"></p>
							<p class="fl" id="size2"></p>
							<p class="fl" id="size3"></p>
							<p class="fl" id="size4"></p>
						</div>
						<p>数量&nbsp;&nbsp;库存<span id="span1"></span>件</p>
						<div class="num clearfix">
							<img class="fl sub" src="img/temp/sub.jpg">
							<span class="fl" id="snumber" contentEditable="true">1</span>
							<img class="fl add"  src="img/temp/add.jpg">
							<p class="please fl">请选择商品属性!</p>
						</div>
					</div>
					<div class="btns clearfix">
						<a href="#2">
							<p class="buy fl" id="buyOrder">立即购买</p>
						</a>
						<a href="#2">
							<p class="cart fr" id="buyCar">加入购物车</p>
						</a>
					</div>
				</div>
			</div>
			<a class="more" href="proDetail.html">查看更多细节</a>
		</div>
		<!-- 购物车mask -->
		<div class="bj" style="top: 52%;width: 464px;position: fixed;top: 240px;">
			<div class="clearfix"><a class="fr gb" onclick="hidden1()"><img src="img/icon4.png"/></a></div>
			<h3>购买</h3>
			<form action="#" method="get">
				<p><label>请输入地址：</label><input type="text" id="omessage" value=""/></p>
				<p><label>商品名称：</label><input type="text" id="onote" value="" readonly/></p>
				<p><label>商品数量：</label><input type="text" id="onumber" value="" readonly/></p>
				<p><label>商品单价：</label><input type="text" id="danjia" value="" readonly/></p>
				<p><label>商品总价：</label><input type="text" id="zongjia" value="" readonly/></p>
				<p>
					<label>优惠券：</label>
					<select id="coupan">
						<option value="0">请选择优惠券</option>
						<option value="0">无/不使用</option>
					</select>
				</p>
				<p>实付：<span id="sf"></span></p>
				<div class="bc">
					<input type="button" value="购买"  id="tobuy"/>
					<input type="button" value="取消" onclick="hidden1()"/>
				</div>
			</form>
		</div>
		<!--返回顶部-->
		<div class="gotop">
			<a href="cart.html">
			<dl>
				<dt><img src="img/gt1.png"/></dt>
				<dd>去购<br />物车</dd>
			</dl>
			</a>
			<a href="javascript:void(0)" class="dh">
			<dl>
				<dt><img src="img/gt2.png"/></dt>
				<dd>联系<br />客服</dd>
			</dl>
			</a>
			<a href="mygxin.html">
			<dl>
				<dt><img src="img/gt3.png"/></dt>
				<dd>个人<br />中心</dd>
			</dl>
			</a>
			<a href="javascript:void(0)" class="toptop" style="display: none">
			<dl>
				<dt><img src="img/gt4.png"/></dt>
				<dd>返回<br />顶部</dd>
			</dl>
			</a>
			<p>400-800-8200</p>
		</div>
		
		<!-------------------login-------------------------->
		<!--footer-->
		<div class="footer">
			<div class="top">
				<div class="wrapper">
					<div class="clearfix">
						<a href="javascript:void(0)" class="fl"><img src="img/foot1.png"/></a>
						<span class="fl">少果无理由退货</span>
					</div>
					<div class="clearfix">
						<a href="javascript:void(0)" class="fl"><img src="img/foot2.png"/></a>
						<span class="fl">坏果免费换货</span>
					</div>
					<div class="clearfix">
						<a href="javascript:void(0)" class="fl"><img src="img/foot3.png"/></a>
						<span class="fl">满20包邮</span>
					</div>
					<div class="clearfix">
						<a href="javascript:void(0)" class="fl"><img src="img/foot4.png"/></a>
						<span class="fl">特色服务</span>
					</div>
				</div>
			</div>
			<p class="dibu">水果商城&copy;2022-2023公司版权所有 渝ICP备088800-44备0000111000号<br />
				违法和不良信息举报电话：188-8888-6666，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
		</div>
	</body>
</html>
